<template>
    <div class="contain-body hdda-box">
        <Title></Title>
        <div class="search-contain-body">
            <el-form ref="form"
                     inline
                     :model="form"
                     label-width="75px">
                <el-form-item>
                    <div class="d-ib font-table"
                         slot="label">案件名称：</div>
                    <el-input v-model="form.ajmcs"></el-input>
                </el-form-item>

                <el-form-item>
                    <div class="d-ib font-table"
                         slot="label">地铁站点：</div>
                    <el-input v-model="form.dtzdmcs"></el-input>
                </el-form-item>

                <el-form-item style="margin-left: 200px">
                    <el-button icon="el-icon-search"
                               class="button-search"
                               @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>

        </div>
        <div>
            <div class="pos-r">
                <Title msg="信息列表"></Title>
                <div class="pos-a" style="right: 0">
                    <el-button @click="openOptions('','add')" type="primary" icon="el-icon-plus">
                        新增
                    </el-button>
                </div>
            </div>
            <CustomTable :columns="columns"
                         :table-data="tableData"
                         :pagination="pagination"
                         @pagination="paginationChange"
                         :total="total">
                <div slot="options"
                     slot-scope="scope">
                    <el-button @click="openOptions(scope,'details')" style="margin-left: 4px;" class="button-blur">详情</el-button>
                    <el-button @click="openOptions(scope,'edit')" style="margin-left: 4px;" class="button-green">编辑</el-button>
                    <el-button @click="deleteDate(scope)" style="margin-left: 4px;" class="button-red">删除</el-button>
                </div>
            </CustomTable>
        </div>

        <el-dialog width="819px"
                   center
                   class="custom-dialog-fill font-table"
                   title="活动审批"
                   :visible.sync="dialog.open">

            <div class="dialog-title"
                 slot="title">
                {{ dialog.title }}
            </div>

            <div class="d-f jc-c">

                <el-form :disabled="flag" class="font-table" style="color: #000000;"ref="form" :model="form" label-width="75px">

                    <div class="d-f jc-c form-security">
                        <el-form-item>
                            <div class="d-ib font-table" slot="" style="margin-left: -47.8%">公安机关机构：</div>
                            <!--<el-input v-model="form.gajgjgdm"></el-input>-->
                            <el-select v-model="form.gajgjgdm"   placeholder="请选择性别">
                                <el-option label="" value="">--请选择机关机构--</el-option>
                                <el-option label="武汉市公安局" value="1">--武汉市公安局--</el-option>
                                <el-option label="武汉东湖高新分局" value="2">--武汉东湖高新分局--</el-option>
                                <el-option label="武汉江汉分局" value="3">--武汉江汉分局--</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <div class="d-ib font-table" slot="label">地铁站点：</div>
                            <el-input v-model="form.dtzdmc"></el-input>
                        </el-form-item>
                    </div>

                    <div class="d-f jc-c form-security">
                        <el-form-item>
                            <div class="d-ib font-table" slot="label">公交线路：</div>
                            <el-input v-model="form.gjxlbm"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div class="d-ib font-table" slot="label">公交公司：</div>
                            <el-input v-model="form.gjgsmc"></el-input>
                        </el-form-item>
                    </div>

                    <div class="d-f jc-c form-security">
                        <el-form-item>
                            <div class="d-ib font-table" slot="label">案件编号：</div>
                            <el-input v-model="form.ajbh"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div class="d-ib font-table" slot="label">案件类别：</div>
                            <el-input v-model="form.ajlb"></el-input>
                        </el-form-item>
                    </div>

                    <div class="d-f jc-c form-security">
                        <el-form-item>
                            <div class="d-ib font-table" style="margin-left: -68.5%">案事件发生开始时间：</div>
                            <el-date-picker style="width: 100%" type="datetime" placeholder="选择日期" v-model="form.asjfskssj"
                                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <div class="d-ib font-table" slot="label">案件名称：</div>
                            <el-input v-model="form.ajmc"></el-input>
                        </el-form-item>
                    </div>

                    <div class="d-f jc-c form-security">
                        <el-form-item>
                            <div class="d-ib font-table" slot="label">案发地点：</div>
                            <el-input v-model="form.afdd"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div class="d-ib font-table" slot="label">事发场所：</div>
                            <el-input v-model="form.sfcs"></el-input>
                        </el-form-item>
                    </div>

                    <el-form-item>
                        <div class="d-ib font-table" slot="label">所属辖区：</div>
                        <el-input v-model="form.ssxq"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <div class="d-ib font-table" slot="label">简要案情：</div>
                        <el-input type="textarea" v-model="form.jyaq"></el-input>
                    </el-form-item>


                </el-form>

            </div>
            <div class="d-f jc-c">
                <div v-if="dialog.type=='details'">
                    <el-button
                            class="button-cancel"
                            @click="dialog.open = false">关 闭
                    </el-button>
                </div>
                <div v-if="dialog.type=='add'">
                    <el-button
                            class="button-cancel"
                            @click="cancel()">取 消
                    </el-button>
                    <el-button
                            class="button-submit mr58"
                            @click="add()">确 定
                    </el-button>
                </div>
                <div v-if="dialog.type=='edit'">
                    <el-button
                            class="button-cancel"
                            @click="cancel()">取 消
                    </el-button>
                    <el-button
                            class="button-submit mr58"
                            @click="edit()">确 定
                    </el-button>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import Title from "../../components/Title";
    import CustomTable from "../../components/CustomTable";

    export default {
        name: "chry",
        components: { Title, CustomTable },
        data () {
            return {
                flag:false,
                fileList: [],
                total: 0,
                pagination: {},

                dialog: {
                    title: '新增方案',
                    open: false,
                    type: 'add',//'edit','add','details'
                },
                form: {
                    xm: ''
                },
                tableData: [

                ],
                columns: [
                    {
                        key: 'ajmc',
                        label: '案件名称',
                    },
                    {
                        key: 'afdd',
                        label: '案发地点'
                    },
                    {
                        key: 'asjfskssj',
                        label: '案事件发生开始时间'
                    },
                    {
                        key: 'dtzdmc',
                        label: '地铁站点名称'
                    },
                    {
                        key: 'gjgsmc',
                        label: '公交公司名称',
                        width:'200px'
                    },
                    {
                        key: 'options',
                        label: '操作',
                        width: '240px',
                        slot: true
                    }
                ],

            }
        },
        mounted () {
        },
        methods: {
            paginationChange (e) {
                this.pagination = e;
                this.getList(this.pagination.pageNum, this.pagination.pageSize);
            },
            getList (page, limit) {
                this.axios.post('/train-asj/selectPage', {
                    current: page,
                    size: limit,
                    entity: {
                        ajmc: this.form.ajmcs || '',
                        dtzdmc: this.form.dtzdmcs || ''
                    }

                }).then((res) => {
                    //列表
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                }).catch((error) => {
                    console.log(error);
                });
            },
            onSubmit () {
                console.log(this.value1);
                this.getList(this.pagination.pageNum, this.pagination.pageSize);
            },
            openOptions (scope,params) {
                console.info(scope);
                this.dialog.type = params
                if (params == 'add') {
                    this.flag=false;
                    this.dialog.title = '新增'
                    this.form={}
                }
                if (params == 'edit') {
                    this.flag=false;
                    this.dialog.title = '编辑'
                    this.form=scope.data;
                }
                if (params == 'details') {
                    this.flag=true;
                    this.dialog.title = '详情'
                    this.form=scope.data;
                }
                this.dialog.open = true
            },


            //根据id删除
            getDetail(id) {
                this.axios.post('/train-asj/removeById', {
                    id: id || 4588988
                }).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.onSubmit();
                }).catch((error) => {
                    this.$message({
                        type: 'info',
                        message: '删除失败'
                    });
                });
            },

            add(){
                this.axios.post('/train-asj/save', this.form).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    });
                    this.dialog.open = false
                    this.onSubmit();
                }).catch((error) => {
                    this.$message({
                        type: 'info',
                        message: '保存失败'
                    });
                });
            },

            edit(){
                this.axios.post('/train-asj/updateById', this.form).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    });
                    this.dialog.open = false

                }).catch((error) => {
                    this.$message({
                        type: 'info',
                        message: '保存失败'
                    });
                });
            },

            deleteDate(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '关闭',
                    type: ''
                }).then(() => {
                    this.getDetail(row.data.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            cancel(){
                this.onSubmit();
                this.dialog.open = false;

            }


        }
    }
</script>

<style lang="scss">
    .custom-dialog-fill {
        .form-security {
            .el-form-item__content {
                width: 205px !important;
            }
        }

    }
    .form-security {
        img {
            width: 122px;
            height: 140px;
            background-size: cover;
            background-image: url(../../assets/imgs/revie_picture.png);
        }
    }
    .hdda-box {
        .mb-14 {
            margin-bottom: 14px;
        }

        .mr111 {
            margin-right: 111px;
        }

        .mr58 {
            margin-right: 58px;
        }
        .input {
            width: 205px !important;
        }
    }
    .form-security {
        img {
            width: 122px;
            height: 140px;
            background-size: cover;
            background-image: url(../../assets/imgs/revie_picture.png);
        }
    }
</style>



